<template>
  <!-- 全部照片 原 文件类型 -->
  <div class="main">
    <h4>回收站</h4>
    <el-button plain @click="refresh" circle>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-shuaxin"></use>
      </svg>
    </el-button>
    <el-divider></el-divider>

    <!--图片加载-->
    <div class="scroll-image" v-loading="loading">
      <ul
        class="list infinite-list"
        v-infinite-scroll="scrollLoad"
        infinite-scroll-disabled="disabled"
        infinite-scroll-distance="10"
        infinite-scroll-immediate="true"
        style="overflow:visible;">
        <el-row :gutter="10">
          <el-col class="list-item img-box" style="width: 10vw;"
                  v-for="(file,i) in fileList" :key="i">
            <el-tooltip :content="file.myFileName+' 右键菜单'" placement="top-start" :open-delay="1000">
              <div class="grid-content bg-purple pointer" @contextmenu.prevent="onContextmenu($event,file)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon--wenjian"></use>
                </svg>

              </div>
            </el-tooltip>
            <el-row>
              {{ file.myFileName }}
            </el-row>
          </el-col>
        </el-row>
      </ul>
      <!--          <p v-if="scrollLoading" id="load_div" class="el-icon-loading"></p>-->
      <p v-if="noMore">没有更多了</p>


    </div>
    <br><br><br><br>

  </div>
</template>

<script>
import Global from "../../../js/global";
import fileDownload from "js-file-download";

export default {
  name: "Trash",
  data() {
    return {
      shareMsg: '',
      drawer_qrcode: false,
      previewFile: {
        type: '',
        data: ''
      },
      boxImage: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      drawer: false,
      fileList: [{
        myFileId: '',
        myFileName: '',
        fileStoreId: '',
        myFilePath: '',
        downloadCount: '',
        updateTime: '',
        parentFolderId: '0',
        size: '',
        type: '',
        data: '',
      }],
      parentFolderId: "0",
      type: '',
      multipleSelection: [],
      search: '',
      loading: true,
      page: 1,
      scrollLoading: false
    }
  },
  computed: {
    noMore() {
      return this.page >= 20
    },
    disabled() {
      return this.scrollLoading || this.noMore
    }
  },
  methods: {

    onContextmenu(event, row) {
      this.$contextmenu({
        /* 菜单*/
        items: [
          {
            label: "刷新",
            onClick: () => {
              this.message = "刷新";
              this.refresh();
            }
          },

          {
            label: "查看信息",
            onClick: () => {
              this.imgMsg(row);
            }
          },
          {
            label: "还原",
            onClick: () => {
              this.restored(row);
            }
          },
          {
            label: "删除",
            onClick: () => {
              this.delOpen(row);
            }
          },

        ],
        event, // 鼠标事件信息
        customClass: "custom-class", // 自定义菜单 class
        zIndex: 3, // 菜单样式 z-index
        minWidth: 150 // 主菜单最小宽度
      });
      return false;
    },
    scrollLoad() {
      this.scrollLoading = true
      setTimeout(() => {
        this.page += 1;
        this.getList(this, this.page, "append"); //调用接口，此时页数+1，查询下一页数据
        this.scrollLoading = false
      }, 1000)
    },

    /**
     * 加载文件列表
     * @param that
     * @param page 页数
     * @param type 加载类型 append 或 覆盖（默认）
     */
    getList(that, page, type) {
      if (page === undefined) {
        page = 1;
      }
      const token = that.$cookies.get("TOKEN");
      if (token === null) {
        that.$router.push({path: '/login'});
      }

      that.axios({
        url: Global.SERVER_ADDRESS + '/trashs/list',
        params: {
          "page": page
        },
        method: 'GET',
      }).then(function (rs) {
        let data = rs.data;
        if (data === null) {
          that.fileList = "";
          that.loading = false;
          return;
        }
        if (type === "append") {
          for (let i = 0; i < data.length; i++) {
            that.fileList.push(data[i])
          }
        } else {
          var rsFileList = [];
          for (let i = 0; i < data.length; i++) {
            rsFileList.push(data[i]);
          }
          that.fileList = rsFileList;
        }
        that.loading = false;

      })
      this.scrollLoading = false;
    },
    refresh() {
      this.getList(this);
    },


    delOpen(row) {
      const that = this;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleClick(row);

      }).catch(function (error) {
        console.log(error)
        that.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },

    handleClick: function (row) {
      this.delFile(row);
    },
    delFile: function (row) {
      delete row.data
      const that = this;
      this.axios({
        url: Global.SERVER_ADDRESS + '/trashs/by-file',
        params: {
          trashJSON: JSON.stringify(row),
        },
        method: 'DELETE',
      }).then(function (rsp) {

        that.notification(true, rsp.data);

        that.getList(that);
      })
    },
    restored(row) {
      delete row.data
      const that = this;
      this.axios({
        url: Global.SERVER_ADDRESS + '/trashs/restored',
        params: {
          trashJSON: JSON.stringify(row),
        },
        method: 'DELETE',
      }).then(function (rsp) {
        that.notification(true, rsp.data);
        that.getList(that);
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    formSize(row) {
      return Math.ceil(row.size / 1024).toFixed(0) + " KB";
    },
    formDate(row) {
      let time = new Date(row.updateTime);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let h = time.getHours();
      let m = time.getMinutes();
      let s = time.getSeconds();
      return year + "-" + month + "-" + date + " " + h + ":" + m + ":" + s;
    },


    imgMsg(row) {
      this.$alert('' +
        '    <p>名称：  ' + row.myFileName + '</p>' +
        '    <p>日期：  ' + this.formDate(row) + '</p>' +
        '    <p>大小：  ' + Math.ceil((row.size / 1024) + 0.5).toFixed(0) + " KB" + '</p>' +
        '    <p>下载量：' + row.downloadCount + '</p>' +
        '', '图片信息', {
          dangerouslyUseHTMLString: true
        }
      );
    },

  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      vm.getList(vm)
    });
  }
}
</script>

<style scoped>
.img-box {
  overflow: hidden;
  margin-top: 3%;
  text-align: center;

}

.infinite-list {
  height: 100vh;
}

.list-item {
  height: 300px;
}

.bg-purple {

}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}


.main {
  text-align: left;
  padding: 0 2%;
}

@media only screen and (max-width: 900px) {
  .main {
    padding: 0 0;
  }

}

body {
  margin: 0;
}

.pointer:hover {
  cursor: pointer;
  color: #409EFF;
}
</style>
